DOM操作 、js获取id的内容 和修改原来的内容(innerHTML)

您所在的位置:网站首页 js 设置div内容 DOM操作 、js获取id的内容 和修改原来的内容(innerHTML)

DOM操作 、js获取id的内容 和修改原来的内容(innerHTML)

2023-10-12 08:45| 来源: 网络整理| 查看: 265

js获取id的内容(getElementById) 和修改原来的内容(innerHTML)

    1.通过ID获取元素

学过HTML/CSS样式,都知道,网页由标签将信息组织起来,而标签的id属性值是唯一的,就像是每人有一个身份证号一样,只要通过身份证号就可以找到相对应的人。那么在网页中,我们通过id先找到标签,然后进行操作。

语法:

document.getElementById(“id”)  

看看下面代码:

结果:null或[object HTMLParagraphElement]

注:获取的元素是一个对象,如想对元素进行操作,我们要通过它的属性或方法。

 

 

例:

document.getElementById

JavaScript

var mychar= document.getElementById('con') ; document.write("结果:"+mychar); //输出获取的P标签。

 效果:

 

 

 

 

 

2.innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML

 

注意:

1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。

2.注意书写,innerHTML区分大小写。

我们通过id="con"获取

元素,并将元素的内容输出和改变元素内容,代码如下:

结果:

   例: innerHTML javascript

JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。

var mychar= document.getElementById('con') ; document.write("原标题:"+mychar.innerHTML+""); //输出原h2标签内容 mychar.innerHTML = 'Hello world!'; document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容

 

结果:

 

 

 

 

 

3.改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢?

语法:

Object.style.property=new style;

 

 

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

基本属性表(property):

注意:该表只是一小部分CSS样式属性,其它样式也可以通过该方法设置和修改。

看看下面的代码:

改变

元素的样式,将颜色改为红色,字号改为20,背景颜色改为蓝:

Hello World!

var mychar = document.getElementById("pcon"); mychar.style.color="red"; mychar.style.fontSize="20"; mychar.style.backgroundColor ="blue";

结果:

 

 

例: style样式 I love JavaScript

JavaScript使网页显示动态效果并实现与用户交互功能。

var mychar= document.getElementById("con"); mychar.style.color='red'; mychar.style.backgroundColor='#CCC'; mychar.style.width = "300px";

 

效果:

 

 

 

4.显示和隐藏(display属性)

网页中经常会看到显示和隐藏的效果,可通过display属性来设置。

语法:

Object.style.display = value

 

注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素。

value取值:

看看下面代码:

 

例: display function hidetext() { var mychar = document.getElementById("con"); mychar.style.display = "none"; } function showtext() { var mychar = document.getElementById("con"); mychar.style.display = "block"; } JavaScript

做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。

 

效果

 

 

 

 

 

5.控制类名(className 属性)

className 属性设置或返回元素的class 属性。

语法:

object.className = classname

 

 

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码,获得

元素的 class 属性和改变className:

结果:

  例子: className属性 body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; }

JavaScript使网页显示动态效果并实现与用户交互功能。

JavaScript使网页显示动态效果并实现与用户交互功能。

function add(){ var p1 = document.getElementById("p1"); p1.className = "one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className = "two" }

 

效果:

 

 

 

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3